<template>
    <el-container :style="{minHeight:`${height}px`,overflow:'hidden'}">
        <el-aside :width="isCollapse?'200px':'64px'">
            <nav-menu :collapse="isCollapse" />
        </el-aside>

        <el-container>
            <el-header class="flex-row ite-c jus-b">
                <el-switch v-model="isCollapse"></el-switch>
                <el-button @click="logout" type="primary" icon="el-icon-switch-button" size="small">退出</el-button>
            </el-header>

            <el-main class="main_content" :style="{height:`${height-100}px`}">
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import {getHeight} from "@/utils/regular";
    import navMenu from "@/components/navMenu/navMenu";

    export default {
        name: "admin",
        components:{
            navMenu,
        },
        data() {
            return {
                isCollapse:true,
                height:0,
            }
        },
        created() {
            this.height = getHeight()
        },
        methods: {
            logout() {
                this.$Confirm({
                    message:'确定退出登录？',
                    success:()=>{
                        this.$store.dispatch('user/logout')
                            .then(()=>{
                                this.$router.push('/login')
                            })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .el-aside{
        background: #545c64;
        box-sizing: border-box;
    }

    .el-header{
        background: #fff;
    }

    .main_content{
        padding: 15px;
        overflow-y: auto;
        overflow-x: hidden;
    }
</style>
